import React, { useEffect, useState } from 'react'
import Hello from './components/Hello'
/**
 * 函数组件中hook可以写多个
 * useEffect 
 * 可以让函数组件实现类组件生命周期
 * componentDidMount  操作真实dom/数据请求
 * componentDidUpdate  操作真实dom/数据请求
 * componentWillUnmount   卸载钩子  清除实例\事件\计时器定时器
   * 参数2个
      * 第一个参数是一个会嗲函数,用于执行操作逻辑
      * 第二个参数是一个可选参数,他的一个类型是数组
        * 没有表示监听所有数据变化{props,state}
        * []空数组 执行一次, 相当于componentDidMount钩子函数
        * [count]  执行多次  表示对count数据的监听,相当于componentDidMount+compontDidUpdate
  *返回值  回调函数
      *表示组件被卸载
*/
export default function LayOut () {
  const [count, setCount] = useState(0)
  const [val, setVal] = useState('')
  const [flag, setFlag] = useState(true)
  useEffect(() => {
    console.log('执行')
    // document.querySelector('p').style.background = 'red'
  }, [count, val])
  return (
    <div>
      <button onClick={() => { setCount(preCount => preCount + 1) }}>+</button>
      <p>{count}</p>
      <hr />
      <input type="text" value={val} onChange={(e) => { setVal(e.target.value) }} />
      <hr />
      <button onClick={() => { setFlag(preFlag => !preFlag) }}>控制hello组件</button>
      {flag && <Hello />}
    </div>

  )
}
